<template>
  <div class="wrap">
    <div class="exit">
      <LeftOutlined style="color: #2e2e2e" />
      <a href="/"><span class="txt">返回首页</span></a>
    </div>
    <div class="title"><span class="preTitle">发布</span>评论</div>
    <!-- 注册表单 -->
    <a-form
      :model="formState"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
      style="width: 360px; position: relative; left: 36%"
      ref="formRef"
      :rules="rules"
    >
      <a-form-item>
        <a-lable style="position: relative; top: 15px; color: #999"
          >发布评论</a-lable
        >
      </a-form-item>

      <a-form-item label="评论内容" name="commentContent">
        <a-textarea v-model:value="formState.commentContent" />
      </a-form-item>
      <a-form-item>
        <button html-type="submit" class="login-form-button" style="left: 40%">
          发&nbsp;布
        </button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { LeftOutlined } from "@ant-design/icons-vue";
import { ref } from "vue";
import { addReview } from "@/service/api.js";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import LocalCatch from "@/utils/token";
const router = useRouter();
console.log(router);
const animalNumber = ref(
  parseInt(router.currentRoute._value.query.animalNumber)
);
const userId = ref(parseInt(LocalCatch.getToken("userId")));
console.log(userId.value);

const formState = ref({
  commentContent: "",
});
const formRef = ref(null);

const onFinish = (success) => {
  console.log(success);
  formRef.value
    .validate()
    .then(async () => {
      const res = await addReview({
        animalNumbers: animalNumber.value,
        commentContent: formState.value.commentContent,
        userId: userId.value,
      });

      if (res.code === 1) {
        message.success(res.data);
        formState.value = {};
      } else message.error("发布失败");
    })
    .catch((err) => {
      console.log(err);
    });
};
const onFinishFailed = (failed) => {
  console.log(failed);
};

const rules = {
  commentContent: [{ required: true }],
};
</script>
<style scoped>
.codeErr {
  display: none;
  position: relative;
  top: -28px;
  color: #ff4d4f;
  font-size: 14px;
}
.exit {
  margin: 10px;
  padding: 10px;
}
.exit .txt {
  margin: 5px;
  font-size: 14px;
  color: #999;
}
.title {
  position: relative;
  left: 45%;
  font-size: 35px;
  color: transparent;
  background-color: #333333;
  text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
    rgba(255, 255, 255, 0.2) 1px 3px 3px;
  -webkit-background-clip: text;
}
.preTitle {
  font-size: 35px;
  color: transparent;
  background-color: #ff6347;
  text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
    rgba(255, 255, 255, 0.2) 1px 3px 3px;
  -webkit-background-clip: text;
}

.codeText {
  width: 130px;
}
.ant-btn-primary {
  color: #fff;
  background-color: #ff6347;
  box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
.login-form-button {
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  width: 40%;
  border: none;
  color: #999;
  position: relative;
  left: 39%;
}
.login-form-button:hover {
  font-size: 16px;
  color: #ff6347;
  /* background-color: #ff6347; */
}
.ant-form {
  margin: 50px 20px 30px 20px;
  padding: 5px 10px;
}
</style>
